<template>
<!--  组件结构-->
  <div id="root">
    <div class="todo-container">
        <div class="todo-wrap">
          <my-header :addtodo="addtodo"/>
          <my-list :todos="todos" :checkedtodo="checkedtodo" :deletetodo="deletetodo"/>
          <my-footer :todos="todos" :checkedalltd="checkedalltd" :deletealltodo="deletealltodo"/>
        </div>
    </div>
  </div>
</template>

<script>
  //引入school组件
import MyHeader from "@/components/MyHeader";
import MyList from "@/components/MyList";
import myFooter from "@/components/MyFooter";
//组件交互相关代码（数据、方法等）
export default{
    name:'App',
    data(){
      return{
        todos:[
          {id: '001', title: '吃饭', done: true},
          {id: '002', title: '睡觉', done: false},
          {id: '003', title: '打豆豆', done: true}
        ],
      }
    },
    methods:{
      //添加一个todo
      addtodo(todoobj){
        //接收header里的数据
        this.todos.unshift(todoobj)
        console.log("我是app组件，我收到了数据")
        const all=this.todos.length
        console.log(all)
      },
      //勾选或者不勾选todo
      checkedtodo(id){

          this.todos.forEach((todo)=>{

          if(todo.id==id)todo.done=!todo.done
          })
          // for (var i=0;i<this.todos.length;i++){
          //   if(this.todos[i].id==id){
          //       this.todos.done=!this.todos.done
          //   }
          // }
      },
      //删除选中的todo
      deletetodo(id){
        console.log("id----",id)
        this.todos=this.todos.filter((todo)=>{
          return todo.id!==id
        })
        // for (var i=0;i<this.todos.length;i++){
        //   if(this.todos[i].id==id){
        //       this.todos.splice(i,1)
        //   }
        // }
      },
      //选中所有todo
      checkedalltd(value){
        this.todos.forEach(todo=>todo.done=value)
      },
      //删除所有完成todo
      deletealltodo(){
        this.todos= this.todos.filter(todo=>{
          return !todo.done
        })
      }

    },
   components:{
     MyHeader,MyList,myFooter
   },

  }

</script>
<style>
  .body{
    background: azure;
  }
  .btn{
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0.05);
    border-radius: 4px;
  }
  .btn-danger{
    color: azure;
    background-color: #de5f5f;
    border: 1px solid red;
  }
  .btn-danger:hover{
    color: azure;
    background-color: red;
  }
  .btn:focus{
    outline: none ;
  }
  .todo-container{
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap{
    padding: 10px;
    border: 1px solid #f1b9b9;
    border-radius: 5px;
  }
</style>